<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item
      v-for="img in banners"
      :key="img.id"
      >
      <img :src="img.imageUrl">
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem } from 'vant'
import { getBanners } from '@/api/home.js'

Vue.use(Swipe)
Vue.use(SwipeItem)

export default {
  name: 'Home',
  data () {
    return {
      banners: ''
    }
  },
  async created () {
    try {
      const result = await getBanners()
      this.banners = result.banners
    } catch (error) {
      console.log(error)
    }
  }
}
</script>

<style lang="scss" scoped>
  html,body {
    width: 100%;
    height: 100%;
  }
  .home {
    width: 100%;
  .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
      img {
        display: block;
        width: 100%;
      }
    }
  }
</style>
